import React from "react";
import { Link, Routes, Route, Outlet } from "react-router-dom";

const About1 = () => {
  return <div>about1页面</div>;
};
const About2 = () => {
  return <div>about2页面</div>;
};

const Home = () => {
  return <div>home页面</div>;
};
const About = () => {
  return (
    <>
      <div>about页面</div>
      <ul>
        <li>
          <Link to="/about">about1</Link>
        </li>
        <li>
          <Link to="/about/about2">about2</Link>
        </li>
      </ul>

      <hr />

      <Outlet />
    </>
  );
};

const App = () => {
  return (
    <>
      <h2>router-v6-nest</h2>
      <ul>
        <li>
          <Link to="/home">home</Link>
        </li>
        <li>
          <Link to="/about">about</Link>
        </li>
      </ul>

      <hr />

      {/* 嵌套路由可以在一处渲染, 用Outlet组件渲染，Outlet相当于vue的router-view */}
      {/* index保持和上一级路由相同的路径 */}
      <Routes>
        <Route path="/home" element={<Home />}></Route>
        <Route path="/about" element={<About />}>
          {/* <Route path="about1" element={<About1 />}></Route> */}
          <Route index element={<About1 />}></Route>
          <Route path="about2" element={<About2 />}></Route>
        </Route>
      </Routes>
    </>
  );
};

export default App;
